﻿<UserControl x:Class="Wpf.Controls.TwoStatesButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Wpf.Controls"
             mc:Ignorable="d" d:DesignHeight="22" Height="22">
    
    <UserControl.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>

        <Storyboard x:Key="MoveLeft">
            <local:GridLengthAnimation Storyboard.TargetName="colFirst" Storyboard.TargetProperty="Width"
				From="*" To="0" Duration="0:0:0.25" />
            <local:GridLengthAnimation Storyboard.TargetName="colLast" Storyboard.TargetProperty="Width"
				From="0" To="*" Duration="0:0:0.25" />
        </Storyboard>
        <Storyboard x:Key="MoveRight">
            <local:GridLengthAnimation Storyboard.TargetName="colFirst" Storyboard.TargetProperty="Width"
				From="0" To="*" Duration="0:0:0.25" />
            <local:GridLengthAnimation Storyboard.TargetName="colLast" Storyboard.TargetProperty="Width"
				From="*" To="0" Duration="0:0:0.25" />
        </Storyboard>
    </UserControl.Resources>

    <Border CornerRadius="3" BorderBrush="#FFD2D1D6" BorderThickness="0.5" Margin="0.5">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFCFEF9" Offset="1"/>
                <GradientStop Color="#FFCFCFCD" Offset="0"/>
            </LinearGradientBrush>
        </Border.Background>

        <Grid x:Name="LayoutRoot">

            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="colFirst" Width="*" />
                <ColumnDefinition Width="14" />
                <ColumnDefinition Width="14" />
                <ColumnDefinition x:Name="colLast" Width="*" />
            </Grid.ColumnDefinitions>

            <Border x:Name="borderLeft" Grid.Column="0" CornerRadius="3,0,0,3" BorderBrush="#FFD2D1D6" BorderThickness="0.5" Margin="-0.5,-0.5,-2,-0.5">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF3573EA" Offset="0"/>
                        <GradientStop Color="#FF3E85FB" Offset="0.5"/>
                        <GradientStop Color="#FF5191F2" Offset="0.5"/>
                        <GradientStop Color="#FF7BB3FF" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>

                <TextBlock Text="{Binding LeftValue}" Foreground="White" Margin="10,0,10.5,0" />
            </Border>

            <Border x:Name="borderRight" Grid.Column="3">
                <TextBlock Text="{Binding RightValue}" Foreground="Black" Margin="10,0,10,0" />
            </Border>

            <Border Grid.Column="1" Grid.ColumnSpan="2" CornerRadius="3" BorderBrush="#FF929292" BorderThickness="0.5,0.5,0.5,0.5" Margin="-1">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFFCFBFB" Offset="0"/>
                        <GradientStop Color="#FFD6D5D5" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>

                <Border CornerRadius="3" BorderBrush="#FFFFFFFF" BorderThickness="0.5,0.5,0.5,0.5" />
            </Border>

        </Grid>
    </Border>
</UserControl>